<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息管理</title>
    <link rel="stylesheet" href="/css/student.css">

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.js"></script>
</head>
<body>
    <!-- 在现有的header部分修改 -->
    <div class="header">
        <div class="header-content">
            <h1>学生信息管理</h1>
            <div class="user-info">
                <span th:if="${teacherName}" class="welcome-text">欢迎，<span th:text="${teacherName}"></span> 老师</span>
                <a href="/teacher/logout" class="logout-btn">退出登录</a>
                <a href="/" class="back-btn">返回首页</a>
            </div>
        </div>
    </div>
    
    <div class="container">
        <div class="toolbar">
            <!-- 现有搜索表单 -->
            <div class="search-form">
                <div class="form-group">
                    <label>姓名</label>
                    <input type="text" id="searchName" class="form-control search-input" placeholder="请输入姓名">
                </div>
                <div class="form-group">
                    <label>专业</label>
                    <input type="text" id="searchMajor" class="form-control search-input" placeholder="请输入专业">
                </div>
                <div class="form-group">
                    <label>班级编号</label>
                    <input type="text" id="searchClass" class="form-control search-input" placeholder="请输入班级编号">
                </div>
                <div class="form-group">
                    <label>&nbsp;</label>
                    <button type="button" id="searchBtn" class="btn btn-primary">查询</button>
                </div>
                <div class="form-group">
                    <label>&nbsp;</label>
                    <button type="button" id="resetBtn" class="btn btn-primary">重置</button>
                    <button type="button" id="exportBtn" class="btn export-btn">导出Excel</button>
                </div>
            </div>
            <div class="toolbar-actions">
                <button type="button" id="addBtn" class="btn btn-success">新增学生</button>
            </div>
        </div>
        
        <!-- 消息提示 -->
        <div id="alertContainer"></div>
        
        <!-- 学生列表 -->
        <div class="table-container">
            <div id="loading" class="loading">
                正在加载数据...
            </div>
            <!-- 批量操作工具栏 -->
            <div class="batch-toolbar" style="margin-bottom: 10px; display: none;" id="batchToolbar">
                <button type="button" class="btn btn-danger btn-sm" id="batchDeleteBtn">批量删除</button>
                <span id="selectedCount" style="margin-left: 10px; color: #666;">已选择 0 项</span>
            </div>
            <table class="table">
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" id="selectAll" title="全选/取消全选">
                        </th>
                        <th>
                            ID
                            <span class="sort-buttons">
                                <button class="sort-btn" data-field="id" data-order="asc" title="正序">↑</button>
                                <button class="sort-btn" data-field="id" data-order="desc" title="倒序">↓</button>
                            </span>
                        </th>
                        <th>
                            姓名
                            <span class="sort-buttons">
                                <button class="sort-btn" data-field="name" data-order="asc" title="正序">↑</button>
                                <button class="sort-btn" data-field="name" data-order="desc" title="倒序">↓</button>
                            </span>
                        </th>
                        <th>性别</th>
                        <th>
                            出生日期
                            <span class="sort-buttons">
                                <button class="sort-btn" data-field="birthDate" data-order="asc" title="正序">↑</button>
                                <button class="sort-btn" data-field="birthDate" data-order="desc" title="倒序">↓</button>
                            </span>
                        </th>
                        <th>
                            专业
                            <span class="sort-buttons">
                                <button class="sort-btn" data-field="major" data-order="asc" title="正序">↑</button>
                                <button class="sort-btn" data-field="major" data-order="desc" title="倒序">↓</button>
                            </span>
                        </th>
                        <th>
                            班级编号
                            <span class="sort-buttons">
                                <button class="sort-btn" data-field="classNumber" data-order="asc" title="正序">↑</button>
                                <button class="sort-btn" data-field="classNumber" data-order="desc" title="倒序">↓</button>
                            </span>
                        </th>
                        <th>
                            入学日期
                            <span class="sort-buttons">
                                <button class="sort-btn" data-field="enrollmentDate" data-order="asc" title="正序">↑</button>
                                <button class="sort-btn" data-field="enrollmentDate" data-order="desc" title="倒序">↓</button>
                            </span>
                        </th>
                        <th>地址</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="studentTableBody">
                    <!-- 数据通过Ajax动态加载 -->
                </tbody>
            </table>
        </div>
        
        <!-- 分页 -->
        <div class="pagination" id="pagination">
            <!-- 分页按钮通过JavaScript动态生成 -->
        </div>
        <div id="pageInfo" style="text-align: center; margin-top: 1rem; color: #666;"></div>
    </div>
    
    <!-- 学生信息模态框 -->
    <div id="studentModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h4 id="modalTitle">新增学生</h4>
                <button type="button" class="close">&times;</button>
            </div>
            <form id="studentForm">
                <div class="modal-body">
                    <input type="hidden" id="studentId">
                    
                    <div class="form-group">
                        <label for="studentName">姓名 *</label>
                        <input type="text" id="studentName" class="form-control" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="studentGender">性别 *</label>
                        <select id="studentGender" class="form-control" required>
                            <option value="">请选择性别</option>
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="studentBirthDate">出生日期</label>
                        <input type="date" id="studentBirthDate" class="form-control">
                    </div>
                    
                    <div class="form-group">
                        <label for="studentMajor">专业 *</label>
                        <input type="text" id="studentMajor" class="form-control" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="studentClassNumber">班级编号 *</label>
                        <input type="text" id="studentClassNumber" class="form-control" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="studentEnrollmentDate">入学日期</label>
                        <input type="date" id="studentEnrollmentDate" class="form-control">
                    </div>
                    
                    <div class="form-group">
                        <label for="studentAddress">地址</label>
                        <input type="text" id="studentAddress" class="form-control">
                    </div>
                    
                    <!-- 添加缺少的联系电话字段 -->
                    <div class="form-group">
                        <label for="studentPhone">联系电话</label>
                        <input type="tel" id="studentPhone" class="form-control" placeholder="请输入手机号">
                    </div>
                    
                    <!-- 添加缺少的邮箱字段 -->
                    <div class="form-group">
                        <label for="studentEmail">邮箱</label>
                        <input type="email" id="studentEmail" class="form-control" placeholder="请输入邮箱地址">
                    </div>
                    
                    <!-- 在学生信息模态框中添加文件上传部分 -->
                    <div class="form-group">
                        <label for="avatarUpload">头像上传：</label>
                        <div class="file-upload-container">
                            <input type="file" id="avatarUpload" accept="image/*" class="file-input">
                            <!-- 添加辅助按钮 -->
                            <button type="button" class="btn btn-info btn-sm" onclick="triggerFileSelect('avatarUpload')">选择头像文件</button>
                            <div class="file-preview" id="avatarPreview">
                                <img id="avatarImg" src="" alt="头像预览" style="display: none; max-width: 100px; max-height: 100px;">
                            </div>
                            <button type="button" class="btn btn-secondary btn-sm" onclick="uploadAvatar()">上传头像</button>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="idCardUpload">身份证件照片：</label>
                        <div class="file-upload-container">
                            <input type="file" id="idCardUpload" accept="image/*" class="file-input">
                            <div class="file-preview" id="idCardPreview">
                                <img id="idCardImg" src="" alt="身份证预览" style="display: none; max-width: 100px; max-height: 100px;">
                            </div>
                            <button type="button" class="btn btn-secondary btn-sm" onclick="uploadIdCard()">上传证件照</button>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="attachmentUpload">其他附件：</label>
                        <div class="file-upload-container">
                            <input type="file" id="attachmentUpload" multiple class="file-input">
                            <div class="file-list" id="attachmentList"></div>
                            <button type="button" class="btn btn-secondary btn-sm" onclick="uploadAttachment()">上传附件</button>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick="closeModal()">取消</button>
                    <button type="submit" class="btn btn-success">保存</button>
                </div>
            </form>
        </div>
    </div>

    <script src="/js/student.js"></script>
</body>
</html>